<template>
  <div class="department-set">
    <el-dialog
      title="配置部门"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="600px"
    >
      <el-form ref="dtemp" label-width="80px">
        <el-form-item label="用户">
          <el-input v-model="username" :disabled="true" :title="username">
          </el-input>
        </el-form-item>
        <el-form-item label="选择部门">
          <el-popover
            placement="bottom-start"
            v-model="treeFlag2"
            class="orgTree"
            trigger="click"
          >
            <el-tree
              :data="deptData"
              :props="defaultProps"
              :expand-on-click-node="false"
              node-key="id"
              style="width: 300px"
              @node-click="handleNodeClickDep2"
              ref="tree"
            ></el-tree>
            <el-input
              slot="reference"
              ref="input"
              v-model="treeName2"
              clearable
              :readonly="true"
              style="width: 100%"
              placeholder="请选择部门"
            ></el-input>
          </el-popover>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-preventReClick @click="handleSubmit"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      treeFlag2: false,
      defaultProps: {
        children: 'childList',
        label: 'name',
      },
      deptIds: '',
      treeName2: '',
      checkedUser: [],
      username: '',
    }
  },
  props: ['deptData'],
  mounted() {
    this.$bus.$on('showDialogSetDepartment', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showDialogSetDepartment')
  },
  methods: {
    init(userList) {
      this.checkedUser = userList
      this.username = userList.map((v) => v.userName).toString()
      this.deptIds = ''
      this.treeName2 = ''
      this.dialogVisible = true
    },
    handleNodeClickDep2(val) {
      this.deptIds = val.id
      this.treeName2 = val.name
      this.treeFlag2 = false
    },
    async handleSubmit() {
      if (!this.deptIds) {
        this.warnMsg('请选择部门')
        return
      }
      let arr = []
      for (let des of this.checkedUser) {
        let obj = { id: des.id, deptId: this.deptIds }
        arr.push(obj)
      }
      await this.$store.dispatch('addDeptBatchTbUser', arr)
      this.dialogVisible = false
      this.deptIds = ''
      this.treeName2 = ''
      this.$bus.$emit('refreshUserList')
      this.successMsg('操作成功')
    },
  },
}
</script>
<style scoped lang="scss">
</style>